<template>
	<div class="main-1">
		<div class="title">{{ label }}</div>
		<div class="upload-list">
			<div class="upload-item" v-if="Object.prototype.toString.call(list) === '[object Array]'" v-for="(item, key) in list" :key="key">
				<image mode="aspectFill" :lazy-load="true" :src="item" alt="" @click="handlerUploadPic(key)" />
			</div>
			<div class="upload-item" v-if="Object.prototype.toString.call(list) === '[object String]'">
				<image mode="aspectFill" :lazy-load="true" :src="list" alt="" @click="handlerUploadPic(undefined)" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			listFlag: null
		};
	},
	props: {
		label: {
			type: String,
			validator: value => {
				return value.length <= 4;
			}
		},
		list: {
			type: [Array, String],
			default: () => {
				return [];
			}
		}
	},
	methods: {
		handlerUploadPic(index) {
			// 对不起，做复杂了额.....
			let that = this;
			console.log(that.listFlag)
			console.log(index)
			console.log(that.list)
			if (index !== undefined) {
				if (!that.listFlag[index]) {
					new Promise((resolve, reject) => {
						that.upLoad(res => {
							if (res) {
								resolve(res);
							}
						});
					}).then(resolve => {
						that.list[index] = resolve;
						that.listFlag[index] = true;
						that.$emit('uploadPic', that.list);
					});
				} else {
					uni.showActionSheet({
						itemList: ['预览', '重新上传'],
						success: res => {
							if (res.tapIndex === 0) {
								uni.previewImage({
									urls: [that.list[index]]
								});
							} else if (res.tapIndex === 1) {
								new Promise((resolve, reject) => {
									that.upLoad(res => {
										if (res) {
											resolve(res);
										}
									});
								}).then(resolve => {
									that.list[index] = resolve;
									that.$emit('uploadPic', that.list);
								});
							}
						}
					});
				}
			} else {
				if (!that.listFlag) {
					new Promise((resolve, reject) => {
						that.upLoad(res => {
							if (res) {
								resolve(res);
							}
						});
					}).then(resolve => {
						that.listFlag = true;
						that.$emit('uploadPic', resolve);
					});
				} else {
					uni.showActionSheet({
						itemList: ['预览', '重新上传'],
						success: res => {
							if (res.tapIndex === 0) {
								uni.previewImage({
									urls: [that.list]
								});
							} else if (res.tapIndex === 1) {
								new Promise((resolve, reject) => {
									that.upLoad(res => {
										if (res) {
											resolve(res);
										}
									});
								}).then(resolve => {
									that.$emit('uploadPic', resolve);
								});
							}
						}
					});
				}
			}
		},
		upLoad(backcall) {
			let that = this;
			that.$httpRequest.handlerUploadPic(res => {
				if (res) backcall(res.data.url);
				else backcall(false);
			});
		}
	},
	created() {
		if (Object.prototype.toString.call(this.list) === '[object Array]') {
			this.listFlag = [];
			for (let i = 0; i < this.list.length; i++) {
				this.listFlag[i] = false;
			}
		} else {
			this.listFlag = false;
		}
	}
};
</script>

<style scoped lang="scss">
.main-1 {
	width: 100%;
	padding-bottom: 30upx;
	display: flex;
	align-items: center;
	height: 80upx;
	.title {
		width: 120upx;
		font-size: 30upx;
		line-height: 1;
		text-align: justify;
		text-align-last: justify;
		white-space: nowrap;
		color: #303133;
		padding-right: 20upx;
	}
	.upload-list {
		width: calc(80% - 20upx);
		box-sizing: border-box;
		font-size: 0;
		height: 100%;
		display: flex;
		align-items: center;
		.upload-item {
			width: 80upx;
			height: 80upx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px dashed #DDDDDD;
			font-size: 0;
			// margin-bottom: 30upx;
			margin-right: 22upx;
			flex-wrap: wrap;
			image {
				width: 70%;
				height: 70%;
			}
		}
	}
}
</style>
